<template>
  <div class="app-container-home" >
	  
	  <el-container>
	    <el-header style="display: flex; flex-direction: row; align-items: center; padding: 10px;height: 100px;background-color: #fff;">
	      <!-- 图片预览 -->
	      <div style="margin: 20px;">
	        <image-preview :src="img" :width="50" :height="50" />
	      </div>
	      
	      <!-- 文本信息区域 -->
	      <div style="flex: 1; display: flex; flex-direction: row;">
	        <div style="margin-bottom: 10px; display: flex; flex-direction: column;">
	          <span style="font-size: 16px; font-weight: bold;">中国（东部）医院综合治疗</span>
	          <span style="font-size: 14px; color: #666;">探索者服务技术支持部</span>
	          <span style="font-size: 14px; color: #666;">到期时间：2099-9-19</span>
	        </div>
	        
	        <div style="margin-left: 30px;">
	          <!-- 剩余短信 -->
	          <div style="display: flex;flex-direction: column;  justify-content: space-between;">
	            <span style="font-size: 14px; color: #333;font-weight: bold;">剩余短信</span>
	            <span style="font-size: 14px;  margin-top: 20px;font-weight: bold;">150条</span>
	          </div>
	        </div> 
			<div style="margin-left: 40px;">
	          <!-- 剩余可添加账号 -->
	          <div style="display: flex;flex-direction: column;  justify-content: space-between;">
	            <span style="font-size: 14px; color: #333;font-weight: bold;">剩余可添加账号</span>
	            <span style="font-size: 14px; margin-top: 20px;font-weight: bold;">2处</span>
	          </div>
	        </div>
			<div style="margin-left: 100px;">
	          <!-- 预约量/接诊量 -->
	          <div style="display: flex;flex-direction: column;  justify-content: space-between;">
				  <span style="font-size: 40px; color: #FF625E;font-weight: bold;">1507/5988</span>
	            <span style="font-size: 14px; color: #333;margin-top: 5px;font-weight: bold;">预约量/接诊量（位）</span>
	          </div>
			</div>  
	        <div style="margin-left: 100px;">  
	          <!-- 成交额/交易额 -->
	          <div style="display: flex;flex-direction: column;  justify-content: space-between;">
				<span style="font-size: 40px; color: #FF625E;font-weight: bold;">5.7/25.8</span>
	            <span style="font-size: 14px; color: #333;margin-top: 5px;font-weight: bold;">成交额/交易额（万元）</span>
	          </div>
	        </div>
			<div style="margin-left: 100px;">
			  <!--	人均消费 -->
			  <div style="display: flex;flex-direction: column;  justify-content: space-between;">
				<span style="font-size: 40px; color: #FF625E;font-weight: bold;">258</span>
			    <span style="font-size: 14px; color: #333;margin-top: 5px;font-weight: bold;">人均消费（元）</span>
			  </div>
			</div>
	      </div>
	    </el-header>
	    <el-container>
	      <el-aside width="1500px">
			  <div style="display: flex; width: 100%; height: 100%; flex-wrap: wrap;">
			      <!-- 设备状态 -->
			      <div id="device-container" style="position: relative; width: 400px; height: 300px; margin-bottom: 20px;">
			          <div class="chart-label" style="border-left: 5px solid #5199EA; position: absolute; top: -10px; left: -10px; background-color: rgba(255, 255, 255, 0.7); padding: 5px; border-radius: 3px;">设备状态</div>
			          <div id="device" style="width: 100%; height: 100%;"></div>
			      </div>
			      <!-- 主要类型 -->
			      <div id="mainType-container" style="position: relative; width: 500px; height: 300px; margin-left: 100px; margin-bottom: 20px;">
			          <div class="chart-label" style="border-left: 5px solid #5199EA; position: absolute; top: -10px; left: -10px; background-color: rgba(255, 255, 255, 0.7); padding: 5px; border-radius: 3px;">主要类型</div>
			          <div id="mainType" style="width: 100%; height: 100%;"></div>
			      </div>
			      <!-- 随访满意度图表 -->
			      <div id="statisfaction-container" style="position: relative; width: 400px; height: 300px; margin-bottom: 20px;">
			          <div class="chart-label" style="border-left: 5px solid #5199EA; position: absolute; top: -10px; left: -10px; background-color: rgba(255, 255, 255, 0.7); padding: 5px; border-radius: 3px;">随访满意度</div>
			          <div id="statisfaction" style="width: 100%; height: 100%;"></div>
			      </div>
			      <!-- 严重病情图表 -->
			      <div id="severe-container" style="position: relative; width: 500px; height: 300px; margin-left: 100px;">
			          <div class="chart-label" style="border-left: 5px solid #5199EA; position: absolute; top: -10px; left: -10px; background-color: rgba(255, 255, 255, 0.7); padding: 5px; border-radius: 3px;">严重病情</div>
			          <div id="severe" style="width: 100%; height: 100%;"></div>
			      </div>
			  </div>
		  </el-aside>
	      <el-main>
			  <!-- 排行榜 -->
			  <template>
			    <div id="sequence" class="sequence-container">
			      <div class="chart-label">接诊排名</div>
			      <table class="borderless-table">
			        <thead>
			          <tr>
			            <th>排名</th>
			            <th>接诊省份</th>
			            <th>接诊人数</th>
			          </tr>
			        </thead>
			        <tbody>
			          <tr v-for="(item, index) in tableData" :key="index">
			            <td>{{ index + 1 }}</td>
			            <td>{{ item.province }}</td>
			            <td>{{ item.patientCount }}</td>
			          </tr>
			        </tbody>
			      </table>
			    </div>
			  </template>
		  </el-main>
	    </el-container>
	  </el-container>
    <!-- <h1>欢迎光临！智慧医疗！(*╹▽╹*)</h1>
    <h2>后台管理系统~</h2>
    <h2>٩(๑❛ᴗ❛๑)۶ (๑＞ڡ＜)☆ Ciallo～(∠・ڡ＜)⌒★ (*^o^)人(^o^*) </h2> -->
	
	
	
	
  </div>
</template>

<script>
	import * as echarts from 'echarts';
	import{getInfo} from "@/api/login"
export default {
  data() {
    return {
		img:'',
	 tableData: [
		{ province: '山东省', patientCount: 152210 },
		{ province: '四川省', patientCount: 8522 },
		{ province: '青海省', patientCount: 1532 },
		{ province: '湖北省', patientCount: 990 },
		{ province: '河南省', patientCount: 520 },
		{ province: '广东省', patientCount: 223 },
		{ province: '湖南省', patientCount: 150 },
		{ province: '台湾省', patientCount: 85 },
		{ province: '福建省', patientCount: 15 },
		{ province: '海南省', patientCount: 6 }
		
		// ... 添加更多数据
	  ]
    };
  },
  mounted() {
  	this.statisfaction()
	this.severe()
	this.mainType()
	this.device()
	this.getUser()
  },
  methods: {
	  //	获取当前登录用户的头像
	  getUser(){
	  		getInfo().then(res=>{
	  			console.log(res.user.avatar);
	  			this.img = res.user.avatar
	  		})  
	  },
	  
	  
	  device(){
		  var chartDom = document.getElementById('device');
		  var myChart = echarts.init(chartDom);
		  var option;
		  
		  // 假设这是您的总数
		    var totalDevices = 2609; // 您需要根据实际情况设置这个值
		   
		    // 计算每个状态的百分比
		    var percentages = [
		      (25 / totalDevices * 100).toFixed(2), // 禁用中
		      (802 / totalDevices * 100).toFixed(2), // 离线中
		      (1502 / totalDevices * 100).toFixed(2) // 在线中
		    ];
		  
		  option = {
		    yAxis: {
		      type: 'category',
		      data: ['禁用中', '离线中', '在线中']
		    },
		    xAxis: {
		      type:'value',
			  axisLabel: {
			          formatter: '{value}%' // 在这里添加百分比符号
			        }
		    },
		    series: [
		      {
		        data: percentages, // 使用百分比数据
		        type: 'bar',
				barWidth: '30%', // 设置柱子宽度为容器宽度的30%（可以根据需要调整）
				itemStyle: {
				  color: function (params) {
					// 根据数据自定义颜色（这里只是一个简单的示例）
					// 您可以根据params.dataIndex或其他条件来返回不同的颜色
					var colors = ['#27B4F2','#27B4F2','#27B4F2']; // 红、绿、蓝
					return colors[params.dataIndex];
				  }
				}
		      }
		    ]
		  };
		  
		  option && myChart.setOption(option);
	  },
	  mainType(){
		var chartDom = document.getElementById('mainType');
		var myChart = echarts.init(chartDom);
		var option;
		
		option = {
		  tooltip: {
		    trigger: 'item'
		  },
		  legend: {
		    top: '5%',
		    left: 'center'
		  },
		  series: [
		    {
		      type: 'pie',
		      radius: ['40%', '70%'],
		      avoidLabelOverlap: false,
		      label: {
		        show: false,
		        position: 'center'
		      },
		      emphasis: {
		        label: {
		          show: true,
		          fontSize: 40,
		          fontWeight: 'bold'
		        }
		      },
		      labelLine: {
		        show: false
		      },
		      data: [
		        { value: 1048, name: '脑CT科室' },
		        { value: 735, name: '男分泌内科' },
		        { value: 580, name: '内脏科室' },
		        { value: 484, name: '皮肤科室' },
		        { value: 300, name: '其他类型' }
		      ]
		    }
		  ]
		};
		
		option && myChart.setOption(option);
  
	  },
	  severe(){
		var chartDom = document.getElementById('severe');
		var myChart = echarts.init(chartDom);
		var option;
		
		option = {
		  xAxis: {
		    type: 'category',
		    data: ['系统问题', '呼吸综合', '淋巴肿瘤', '内分泌瘤', '血液传染', '其他问题']
		  },
		  yAxis: {
		    type: 'value'
		  },
		  series: [
		    {
		      data: [
		        {
		          value: 20,
		          itemStyle: {
		            color: '#0CA451'
		          }
		        },
		        {
		          value: 55,
		          itemStyle: {
		            color: '#FB863D'
		          }
		        },
				{
				  value: 75,
				  itemStyle: {
				    color: '#FB863D'
				  }
				},
				{
				  value: 22,
				  itemStyle: {
				    color: '#0CA451'
				  }
				},
				{
				  value: 15,
				  itemStyle: {
				    color: '#0CA451'
				  }
				},
				{
				  value: 38,
				  itemStyle: {
				    color: '#FB863D'
				  }
				},
		      ],
		      type: 'bar',
			  barWidth: '30%', // 设置柱子宽度为容器宽度的30%（可以根据需要调整）
		    }
		  ]
		};
		
		option && myChart.setOption(option);
  
	  },
	  
	 statisfaction() {
	  var chartDom = document.getElementById('statisfaction');
	  var myChart = echarts.init(chartDom);
	  var option;
	 
	  const colors = ['#2CD8E9', '#FC5FA4']; // 满意和不满意的颜色
	  option = {
	    color: colors,
	    tooltip: {
	      trigger: 'axis', // 在X轴上触发提示
	      axisPointer: {
	        type: 'cross'
	      }
	    },
	    legend: {
	      data: ['满意', '不满意'] // 设置图例为满意和不满意
	    },
	    grid: {
	      left: '3%',
	      right: '4%',
	      bottom: '3%',
	      containLabel: true
	    },
	    xAxis: {
	      type: 'category',
	      boundaryGap: false,
	      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] // X轴数据为月份
	    },
	    yAxis: {
	      type: 'value'
	    },
	    series: [
	      {
	        name: '不满意',
	        type: 'line',
	        smooth: true,
	        data: [
	          // 这里填入每个月的满意数量
	          75, 80, 60, 63, 61, 66, 81, 85, 82, 88, 90, 95
	        ]
	      },
	      {
	        name: '满意',
	        type: 'line',
	        smooth: true,
	        data: [
	          // 这里填入每个月的不满意数量
	          55, 60, 62, 58, 47, 45, 50, 51, 40, 43, 20, 21
	        ]
	      }
	    ]
	  };
	 
	  option && myChart.setOption(option);
	}
  }
};
</script>

<style scoped lang="scss">
h1{
  font-family:tutu;
  font-size: 50px;
}

h2{
  font-family:tutu;
  font-size: 45px;
}

.app-container-home {
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
}
 
.el-header {
  background-color: #B3C0D1;
  color: #333;
  width: 100%;
}
 
.el-container {
  display: flex;
  flex: 1;
  width: 100%;
}
 
.el-aside {
  background-color: #FFFFFF;
  color: #333;
  flex: 0 0 80%; /* 可以根据需要调整这个比例 */
  max-width: 1500px; /* 如果需要限制最大宽度 */
  overflow: auto; /* 如果内容超出容器大小，允许滚动 */
}
 
.el-main {
  background-color: #FFFFFF;
  color: #333;
  flex: 1;
  padding: 20px; /* 为内容留出一些空间 */
  box-sizing: border-box; /* 确保内边距和边框不会增加容器的宽度 */
}
 
.sequence-container {
  width: 100%; /* 使用百分比宽度 */
  max-width: 400px; /* 如果需要，可以设置一个最大宽度 */
  margin-bottom: 20px;
}
 
.chart-label {
  border-left: 5px solid #5199EA;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 5px;
  border-radius: 3px;
  position: relative; /* 使用相对定位，而不是绝对定位 */
  margin-bottom: 10px; /* 为表格留出一些空间 */
}
 
.borderless-table {
  width: 100%;
  border-collapse: collapse;
}
 
.borderless-table th,
.borderless-table td {
  border: none;
  padding: 10px; /* 使用较小的内边距 */
  text-align: left;
}
 
.borderless-table th {
  background-color: #f2f2f2;
}
</style>

